/**
 * Created by Dalyn on 2017/3/15.
 * 贷款设置-弹框
 */
import React, {Component}from 'react';
import Relay from "react-relay";
import InputBox from "../../common/InputBox";
import Confirm from "../../common/Confirm";
import Select from '../../common/Select'
import CreateOrUpdateManagerMutation from "./mutation/CreateOrUpdateManagerMutation"
import  FindRoleListMutation from "../rolemanage/mutation/FindRoleListMutation"
import  GetManagerDefaultPasswordMutation from "./mutation/GetManagerDefaultPasswordMutation"

import ReactKey from "../../util/ReactKey";


import {_Modal,_Icon} from 'ANT_DE';
const Modal = _Modal,
       Icon = _Icon;


export default class ManagerEdit extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            displayflag: false,
            name: "",
            password: "",
            phone: "",
            managerId: null,
            roleId: null,
            isDefaultPassword: "0",
            text:"编辑人员信息",
            phoneError:"",
            nameError:"",
            passwordError:"",
            roleError:"",
            hint:"",
            showPwd:"********",
            defaultSelect:"1"
        };
        this.style = {
            confirm: {
                width: '60px',
                height: '30px',
                backgroundColor: "#1b3249",
                fontSize: "18px",
                color: "#fff",
                marginTop: "16px",
                marginLeft: "20px",
                fontFamily: "Microsoft YaHei"
            },
            manager_input: {
                width: "170px",
                height: "22px",
                marginTop: "10px",
                paddingRight:5
            },
            manager_input_2: {
                width: "170px",
                height: "22px",
                marginTop: "10px",
                borderColor: "grey",
                borderWidth: 1,
                outline: "none",
                resize:"none",
                paddingLeft:"20px"
            },
            label: {
                float:"left",
                display:"inline-block",
                fontSize: "14px",
                vertical: "-align: -2px",
                width:"312px",
                height:"51px",
                paddingLeft:"150px"
            },
            label_1: {
                float:"left",
                display:"inline-block",
                fontSize: 12,
                vertical: "-align: -2px",
                width:"60px",
                color:"blue",
                cursor:"pointer",
                marginTop:5
            },
            input: {
                width: "13px",
                height: "13px",
                verticalAlign:"-2px",
                borderRadius:"3px"
            },
            public_lot3:{
                paddingLeft:'10px',
                width:'192px',
                fontSize:'14px',
                color:'white',
                backgroundColor:'#f5c956',
                height:'26px',
                marginTop:'10px'
            }
        };
        this.roleArr = [];
        this.isRelay = true;
        this.defaultPwd = "yiyoudao001";
        this.newPwd;
    }
    componentWillMount(){
        this.roleList();
    }

    /*取消操作*/
    handleCancel(flag) {
        this.setState({
            displayflag: !flag
        });
    }

    /*点击确认*/
    handleConfirm(flag) {
        if(!this.state.roleId && null != this.roleArr && this.roleArr.length > 0){
            this.setState({
                roleId: this.roleArr[0].value,
            });
        }
        //校验数据
        this.bluron("phone");
        this.bluron("name");
        /*if(this.refs._newPwd.state.text){
            this.bluron("newPwd");//如果修改了
        }*/
        if(this.isRelay){
            this.setState({
                name: this.refs._name.state.text,
                phone: this.refs._phone.state.text,
            }, this.commit)
        }
    }


    /*失去焦点*/
    bluron(type) {
        switch (type) {
            case "phone":
                let value = this.trim(this.refs._phone.state.text);
                let reg1 = /^1[3-8]\d{9}$/g;
                let reg2 = /\s+/g;
                if (reg1.test(value)) {
                    this.setState({
                        phoneError: ""
                    })
                } else if (!value) {
                    this.isRelay = false;
                    this.setState({
                        phoneError: "请输入手机号"
                    })
                } else {
                    this.isRelay = false;
                    this.setState({
                        phoneError: "请输入正确的手机号"
                    })
                }
                return;
            case "name":
                let nameValue = this.trim(this.refs._name.state.text);
                let reg = /\s+/g;
                if (reg.test(nameValue) || !nameValue) {
                    this.isRelay = false;
                    this.setState({
                        nameError: "请输入姓名"
                    })
                }else {
                    this.setState({
                        nameError: ""
                    })
                }
                return;
            case "password":
                let passwordValue = this.trim(this.refs._password.state.text);
                let reg5 = /^[a-zA-Z\d]{6,32}$/g;
                let reg6 = /\s+/g;
                if (reg5.test(passwordValue)) {
                    this.setState({
                        passwordError: ""
                    })
                } else if (reg6.test(passwordValue) || !passwordValue) {
                    this.isRelay = false;
                    this.setState({
                        passwordError: "请输入密码"
                    })
                } else {
                    this.isRelay = false;
                    this.setState({
                        passwordError: "请输入6-32位字母或数字"
                    })
                }
                return;
        }
    }


    /*获取焦点*/
    focuson(type) {
        switch (type) {
            case "phone":
                this.isRelay = true;
                this.setState({
                    phoneError: ""
                });
                return;
            case "name":
                this.isRelay = true;
                this.setState({
                    nameError: ""
                });
                return;
            case "password":
                this.isRelay = true;
                this.setState({
                    passwordError: ""
                });
                return;
        }
    }

    /*去掉前后空格*/
    trim(str){
        return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');
    }

    /*保存提交数据*/
    commit(){
        Relay.Store.commitUpdate(
            new CreateOrUpdateManagerMutation({
                name: this.state.name,
                password: this.newPwd,
                phone: this.state.phone,
                managerId: this.state.managerId,
                roleId: this.state.roleId,
                isDefaultPassword: this.state.isDefaultPassword
            }),
            {
                onFailure: () => {
                    this.showError("error","请求失败");
                },
                onSuccess: (response) => {
                    let data = response.createOrUpdateManager.data;
                    if (data.errorCode === "0") {
                        this.setState({
                            displayflag: false,
                        },()=>{
                            this.showInfo("","编辑人员成功");
                            this.props.managerList();
                        });
                    } else {
                        this.showError("error",data.value);
                    }
                }
            }
        );
    }

    /**错误提示框*/
    showError(title,value){
        Modal.error({
            title: !title?"提示：":title,
            content: value,
            width:390
        });
    }

    /*成功提醒*/
    showInfo(title,value){
        Modal.info({
            title: !title?"提示：":title,
            content: value,
            width:390
        });
    }

    /*重置密码*/
    setPwd(){
        this.getDefaultPwd();
    }

    /*加载角色数据*/
    roleList(){
        Relay.Store.commitUpdate(
            new FindRoleListMutation({
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {
                    let errorcode = response.findRoleList.findRoleList.errorCode;
                    if(errorcode == 0){
                        let roleModelList = response.findRoleList.findRoleList.roleModelList;
                        for(let i=0;i<roleModelList.length;i++){
                            let role = roleModelList[i];
                            this.roleArr[i]={text:role.name,value:role.rid};
                        }
                    }
                }
            }
        )
    }
    /*填充更新组件的角色默认信息*/
    showRole(){
        if(this.state.roleId){
            this.setState({
                defaultSelect:this.state.roleId
            });
            this.refs._role.setState({
                defaultValue:73
            });
        }
        this.setState({
            displayflag:true
        });
    }

    /*获取默认密码*/
    getDefaultPwd(){
        Relay.Store.commitUpdate(
            new GetManagerDefaultPasswordMutation({
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {
                    let data = response.getManagerDefaultPassword.data;
                    if(data.errorCode == 0){
                        this.defaultPwd = data.defaultValue;
                    }else{
                        this.defaultPwd = "yiyoudao001";
                    }
                    this.setState({
                        showPwd:this.defaultPwd
                    });
                    this.newPwd = this.defaultPwd;
                }
            }
        )
    }

    /*初始化数据显示*/
    initHit(){
        this.isRelay = true;
        this.setState({
            nameError: "",
            phoneError: "",
            passwordError: ""
        });
    }
    /*选择*/
    onselectchose(value){
        this.setState({
            roleId: value,
        });
    }

    //asdasd
    render(){
        return(
            // <div className="manager_hint_bg" style={this.state.displayflag ? {display: 'block'} : {display: 'none'}}>
            // </div>
                <Modal
                    className="modal_gre-title"
                    title={this.state.text}
                    visible={this.state.displayflag}
                    onCancel={this.handleCancel.bind(this, this.state.displayflag)}
                    onOk={this.handleConfirm.bind(this, this.state.displayflag)}
                >
                <div>
                    <div className="manager_set_up clear">
                        <div className="manager_set_upd clear">
                            <p className="manager_set_upp loan_set_float clear">
                                <span className="red">*</span>
                                手机号(用作登录号)：
                            </p>
                            <div className=" manager_set_float">
                                <InputBox style={this.style.manager_input} className="addstaff_input_bro_no" defaultvalute="请输入手机号" ref={'_phone'}
                                          maxlength={11} bluron={this.bluron.bind(this, "phone")}
                                          focuson={this.focuson.bind(this, "phone")} disabled = {true}/>
                                <span className="manager_set_hint1">{this.state.phoneError}</span>
                            </div>
                        </div>
                        <div className="manager_set_upd clear">
                            <p className="manager_set_upp loan_set_float clear">
                                <span className="red">*</span>
                                姓名：
                            </p>
                            <div className=" manager_set_float">
                                <InputBox style={this.style.manager_input} className="addstaff_input_bro_no" defaultvalute="请输入姓名" ref={'_name'}
                                          maxlength={15} bluron={this.bluron.bind(this, "name")}
                                          focuson={this.focuson.bind(this, "name")} />
                                <span className="manager_set_hint1">{this.state.nameError}</span>
                            </div>
                        </div>
                        <div className="manager_set_upd clear">
                            <p className="manager_set_upp loan_set_float clear">
                                <span className="red">*</span>
                                密码：
                            </p>
                            <div className=" manager_set_float">
                                <input style={this.style.manager_input_2} className="addstaff_input_bro_no"  readOnly ref={'_password'} value={this.state.showPwd}/>
                                <span className="manager_set_hint1">{this.state.passwordError}</span>
                            </div>
                        </div>
                        <div className="manager_set_upd clear">
                            <p className="manager_set_upp loan_set_float clear"></p>
                            <div className=" manager_set_float">
                                <label style={this.style.label_1} onClick={this.setPwd.bind(this)}>重置密码</label>
                            </div>
                        </div>
                        <div className="manager_set_upd clear">
                            <p className="manager_set_upp loan_set_float clear">
                                <span className="red">*</span>
                                角色：
                            </p>
                            <div className=" manager_set_float">
                                <Select className="addstaff_input_bro_no" oArr={this.roleArr} key={this.state.defaultSelect} defaultValue={this.state.defaultSelect} style={this.style.public_lot3} ref={'_role'} onselectchose={this.onselectchose.bind(this)}/>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
        )
    }
}